<template>
  <div class="fangzhen">
    <div id="cesiumContainer1"></div>
    <div class="aslider_s">
      <div class="asliderStyle">
        <div class="cendiv">
          <div class="firstDiv">
            <div class="borderDiv" @click="fangzhen">
              <img src="../../assets/images/fangzhen.png" alt="">
              <span>仿真实验</span>
            </div>
            <div class="borderDiv" @click="jiqi">
              <img src="../../assets/images/xuexi.png" alt="">
              <span>机器学习</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h100" v-show="dialogTableVisible" >
<!--      <div class="tanDiv"></div>-->
      <div  class="diaStyle">
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div class="xxDiv">
            <div class="titlegk">{{ tanName }}</div>
            <div class="gkuang" v-if="conditionEffect === 'dark'">
              <el-row :gutter="20" v-for="(condition, index) in conditions" :key="index">
                <el-col :span="4"><div class="grid-content ep-bg-purple">{{ condition.name }}</div></el-col>
                <el-col :span="12"><div class="grid-content ep-bg-purple">{{ condition.description }}</div></el-col>
                <el-col :span="6"><div class="grid-content ep-bg-purple">{{ condition.value }}</div></el-col>
                <el-col :span="2"><div class="grid-content ep-bg-purple"><el-checkbox v-model="condition.checked" label="" size="large" /></div></el-col>
              </el-row>
            </div>
            <div class="gkuang" v-if="parameterEffect === 'dark'">
               taizohe
            </div>
          <div class="caozuo">
            <div>
              <el-tag size="large" v-if="conditionEffect === 'dark'" style="cursor: pointer;" @click="startSimulation">开始仿真运行</el-tag>
              <el-tag size="large" v-if="parameterEffect === 'dark'" style="cursor: pointer;" >确定参数</el-tag>
            </div>
<!--            <div>-->
<!--              <el-tag size="large" style="cursor: pointer;" :effect="conditionEffect" @click="change('condition')">工况选择</el-tag>-->
<!--              <el-tag size="large" style="cursor: pointer;" :effect="parameterEffect" @click="change('parameter')">调整参数</el-tag>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="h100" v-show="dialogTableVisible1" >
<!--      <div class="tanDiv"></div>-->
      <div  class="diaStyle">
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div class="xxDiv">
          <div class="titlegk">{{ tanName }}</div>
          <div class="gkuang" v-if="parameterEffect === 'dark'">

            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="风机风量">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="闸门1开度">
                <el-input v-model="form.region" />
              </el-form-item>
              <el-form-item label="闸门2开度">
                <el-input v-model="form.delivery" />
              </el-form-item>
            </el-form>



          </div>
          <div class="caozuo">
            <div>
              <el-tag size="large" v-if="parameterEffect === 'dark'" style="cursor: pointer;" @click="queren">确定参数</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium';
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
const apiKey =  "AAPK9afd0a76a6aa4b9ab6731982a53d10b2ZIWCKoYT1Lo7dDGOMi5xjcY7TIBkpfvmPkyV7_ZNYpr0b-0JOl4Gencs8EVb2aXy"; // 替换为你的 API 密钥
const cesiumAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZjRjOGQwNy1iODM1LTQzNTEtYTFkZS1lMWQ2NTM3Zjk5ZGMiLCJpZCI6MjA0NDM5LCJpYXQiOjE3MTE0MTYyNjV9.7fi9z31YPkF29lSSrvYpWaGLqoR6FiexnXkACPbP8sc";
let viewer,viewer1,modelType,modelName;
import point from '../../../src/assets/images/icon/point.png'; // 根据实际的文件路径修改引入路径



export default {
  name: "fangzhen",
  data() {
    return {
      map:null,
      dialogTableVisible:false,
      dialogTableVisible1:false,
      conditionEffect: 'dark',
      parameterEffect: 'light',
      tanName:'工况选择',
      form:{
        name: '5000',
        region: '50',

        delivery: 50,

      },
      //建筑物
      stations1:[
        {
          id:'111',
          name:'办公楼',
          type: '1',
          lng:'118.3006295',
          lat:'33.9360111'
        },{
          id:'222',
          name:'鼓风机房',
          type: '2',
          lng:'118.29986859300',
          lat:'33.93606893600'
        },{
          id:'333',
          name:'3#生化池',
          type: '3',
          lng:'118.30045537800',
          lat:'33.93555802100'
        },{
          id:'3331',
          name:'2#生化池',
          type: '3',
          lng:'118.29990101900',
          lat:'33.93552261700'
        },{
          id:'3332',
          name:'1#生化池',
          type: '3',
          lng:'118.2993814',
          lat:'33.9354960'
        },{
          id:'444',
          name:'3#二沉池',
          type: '4',
          lng:'118.30051557800',
          lat:'33.93499185200'
        },{
          id:'4441',
          name:'2#二沉池',
          type: '4',
          lng:'118.2999671',
          lat:'33.9349324'
        },{
          id:'4442',
          name:'1#二沉池',
          type: '4',
          lng:'118.29947796400',
          lat:'33.93493465000'
        },{
          id:'555',
          name:'4#曝气池',
          type: '5',
          lng:'118.30051670300',
          lat:'33.93417290600'
        },{
          id:'666',
          name:'浓缩/匀质池',
          type: '6',
          lng:'118.29973140900',
          lat:'33.93424526600'
        },{
          id:'777',
          name:'脱水机房',
          type: '7',
          lng:'118.29975774700',
          lat:'33.93399788100'
        },{
          id:'888',
          name:'消毒间',
          type: '8',
          lng:'118.29996094400',
          lat:'33.93449002500'
        },{
          id:'999',
          name:'平流沉砂池',
          type: '9',
          lng:'118.29942323500',
          lat:'33.93601853300'
        },{
          id:'1000',
          name:'配电室',
          type: '10',
          lng:'118.29952164500',
          lat:'33.93622756400'
        },{
          id:'1001',
          name:'1#接触池',
          type: '11',
          lng:'118.29949263200',
          lat:'33.93463791800'
        },{
          id:'1002',
          name:'2#接触池',
          type: '11',
          lng:'118.29994829600',
          lat:'33.93466121900'
        },{
          id:'1003',
          name:'3#接触池',
          type: '11',
          lng:'118.30056209700',
          lat:'33.93464167000'
        },
      ],
      checked1:'',
      conditions: [
        { name: '工况1', description: '进水氢氮浓度偏高', value: '100mg/L', checked: false },
        { name: '工况2', description: '进水COD浓度偏高', value: '800mg/L', checked: false },
        { name: '工况3', description: '进水COD浓度偏低', value: '150mg/L', checked: false },
        { name: '工况4', description: '气温突然降低', value: '<5C', checked: false },
        { name: '工况5', description: '污泥沉降性变差', value: ' SV1>180', checked: false }
      ]
    };


  },
  mounted() {
    this.initMap()
  },
  methods: {
    async initMap(){
      Cesium.Ion.defaultAccessToken = cesiumAccessToken;
      Cesium.ArcGisMapService.defaultAccessToken = apiKey;
      // const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
      // 创建 Cesium 地球对象
      viewer = new Cesium.Viewer('cesiumContainer1',{
        baseLayerPicker: false, // 不显示图层选择器
        fullscreenButton: false, // 不显示全屏按钮
        homeButton: false, // 不显示返回初始位置按钮
        infoBox: false, // 不显示信息框
        sceneModePicker: false, // 不显示场景模式选择器
        selectionIndicator: false, // 不显示选择指示器
        timeline: false,
        animation: false,
        geocoder:false,
        // baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
      });
      // 将视角定位到指定坐标点118.2996520
      const destination = Cesium.Cartesian3.fromDegrees(118.3033,33.935,300); // 你的目标坐标点
      const heading = Cesium.Math.toRadians(-90); // 朝向北方（0度）
      const pitch = Cesium.Math.toRadians(-45); // 俯仰角，根据你的需求调整
      const roll = 0; // 翻滚角，通常设置为0
      viewer.camera.setView({
        destination: destination,
        orientation: {
          heading: heading,
          pitch: pitch,
          roll: roll
        }
      });



      const santaMonicaParcels = Cesium.ArcGisMapServerImageryProvider.fromUrl("https://tiles.arcgis.com/tiles/isEbfhhM3nXXcWNI/arcgis/rest/services/GLmap/MapServer", {
        token:apiKey
      });
      viewer.scene.imageryLayers.add(
        Cesium.ImageryLayer.fromProviderAsync(santaMonicaParcels)
      );
      let tileset,tileset1;

      // try {
      //   tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2576239);
      //   tileset1 = await Cesium.Cesium3DTileset.fromIonAssetId(2566471);
      //   viewer.scene.primitives.add(tileset);
      //   viewer.scene.primitives.add(tileset1);
      //   // await viewer.zoomTo(tileset);
      // } catch (error) {
      //   console.log(error);
      // }

// 将地点添加到Cesium地图上
      this.stations1.forEach((station) => {
        const position = Cesium.Cartesian3.fromDegrees(parseFloat(station.lng), parseFloat(station.lat),10);
        viewer.entities.add({
            position: position,
            id: station.id,
            name: station.name,
            type: station.type,
            billboard: {
              // 使用一个简单的图标作为标记
              image: point, // 替换为你的图标路径
              scale: 1.0,
              width: 35,//设置图片大小
              height: 35,//设置图片大小
              show: true,// 是否显示
          },
          label: {
            text: station.name,
            showBackground: true, // 显示背景
            backgroundColor: new Cesium.Color(0.0, 0.5, 0.3, 0.8), // 背景颜色
            font: '16px monospace',
            style: Cesium.LabelStyle.FILL,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签位置：底部
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
            pixelOffset: new Cesium.Cartesian2(0, -20) // 偏移量，以调整标签位置
          }
        });
      });

      const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 添加点击事件监听器
      handler.setInputAction((click) => {
        // 获取点击位置的实体信息
        const pickedObject = viewer.scene.pick(click.position);
        if (Cesium.defined(pickedObject) && pickedObject.id) {
          const entity = pickedObject.id;
          const id = entity.id; // 假设实体的名称存储在name属性中
          const type = entity.type; // 假设实体的名称存储在name属性中
          // 调用自定义的弹窗组件显示信息
          this.showInfoWindow(entity);
          // this.$emit('update-current-component', { id: id, type: type });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    },

    // 自定义弹窗显示实体信息

    async showInfoWindow(content) {
      // 在这里实现您自己的弹窗显示逻辑，可以是模态框、信息窗口等  modelType  1 公用  2曝气 3加药
      switch (content.type) {
        case '1':
          // 处理类型为 '1' 的情况
          modelType = '1';
          modelName = '2568232'
          break;
        case '2':
          modelType = '1'
          modelName = '2568232'
          // 处理类型为 '2' 的情况
          break;
        case '3':
          modelType = '1'
          modelName = '2568227'
          // 处理类型为 '3' 的情况
          break;
        case '4':
          modelType = '1'
          modelName = '2568233'
          // 处理类型为 '3' 的情况
          break;
        case '5':
          modelType = '2';
          modelName = '2576502';
          // this.tanShow = '5'
          break;
        case '6':
          modelType = '1'
          modelName = '2568226'
          // 处理类型为 '3' 的情况
          break;
        case '7':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        case '8':
          modelType = '3';
          modelName = '2568232';
          // this.tanShow = '8'
          // 处理类型为 '3' 的情况
          break;
        case '9':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        case '10':
          modelType = '1'
          modelName = '2568230'
          // 处理类型为 '3' 的情况
          break;
        default:
          // 处理默认情况
          break;
      }
      switch (modelType) {
        case '1':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'mpublic', pageType:modelName });
          break;
        case '2':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'baoqif', pageType:modelName });
          break;
        case '3':
          // 处理类型为 '1' 的情况
          this.$emit('change-page', { pageName: 'jiayaof', pageType:modelName });
          break;
        default:
          // 处理默认情况
          break;
      }

      // this.$emit('change-page', 'baoqif');
      // this.dialogTableVisible = true;


    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      // listCkxx(this.queryParams).then(response => {
      //   this.ckxxList = response.rows;
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogTableVisible1 = false;
    },
    //仿真
    fangzhen(){
      this.dialogTableVisible = true;

    },
    //机器学习
    jiqi(){

    },


    //选择
    change(button) {
      if (button === 'condition') {
        this.conditionEffect = 'dark';
        this.tanName = '工况选择'
        this.parameterEffect = 'light';
      } else if (button === 'parameter') {
        this.conditionEffect = 'light';
        this.parameterEffect = 'dark';
        this.tanName = '工艺参数调整'
      }
    },
    //开始仿真操作
    startSimulation() {
      const that  = this;
      let uncheckedConditions = that.conditions.filter(condition => !condition.checked);
      if (uncheckedConditions.length == this.conditions.length) {
        // 显示警告消息
        ElMessage({
          message: '请先选择要操作的工况项.',
          type: 'warning',
        })
      } else {
        // 条件已被选中，执行仿真逻辑
        that.dialogTableVisible = false;
        ElNotification({
          title: '执行中',
          message: h('i', { style: 'color: teal' }, '开始仿真运行'),
          duration: 2000,
        })
        setTimeout(yourMethodToExecuteAfterTwoSeconds, 2000);
        function yourMethodToExecuteAfterTwoSeconds(){
          // 检查是否已经存在一个 infoDiv 元素，如果存在则先将其删除
          const prevInfoDiv = document.getElementById('infoDiv');
          if (prevInfoDiv) {
            document.body.removeChild(prevInfoDiv);
          }
          // 创建一个用于显示信息的div元素
          const infoDiv = document.createElement('div');
          infoDiv.id = 'infoDiv';
          infoDiv.style.position = 'absolute';
          infoDiv.style.display = 'block'; // 初始隐藏
          infoDiv.style.padding = '10px';
          infoDiv.style.backgroundColor = '#4683b7';
          infoDiv.style.opacity = '0.8';
          infoDiv.style.color = 'white';
          infoDiv.style.borderRadius = '5px';
          infoDiv.style.zIndex = '999';
          infoDiv.style.width = '16rem';
          infoDiv.style.height = '10rem';
          // 创建参数调整按钮
          const tiaozhengButton = document.createElement('button');
          tiaozhengButton.textContent = '参数调整';
          tiaozhengButton.style.cursor = 'pointer';
          tiaozhengButton.style.backgroundColor = '#27a6f8';
          tiaozhengButton.style.color = 'white';
          tiaozhengButton.style.borderRadius = '3px';
          tiaozhengButton.onclick = tiaozheng1;
          infoDiv.innerHTML = `
            <span style="font-size: 1rem;font-weight: bold;">脱水机房 仿真信息:</span>
            <div id="coordinates">
                 <div><span>风机风量：</span><span>4800m<sup>3</sup></span></div>
                 <div><span>闸门1开度：</span><span>50</span></div>
                 <div><span>闸门2开度：</span><span>50</span></div>
            </div>
        `;
          // 将按钮添加到infoDiv中
          infoDiv.appendChild(tiaozhengButton);
          document.body.appendChild(infoDiv);
          const longitude = 118.29975774700;
          const latitude = 33.93399788100;
          // 在地图视图变化时更新infoDiv的位置
          viewer.scene.postRender.addEventListener(function () {
            // 获取要定位的地理坐标点
            const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, 8);
            // 将地理坐标点转换为屏幕坐标
            const canvasPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
            // 设置infoDiv的位置为屏幕坐标
            infoDiv.style.left = canvasPosition.x + 'px';
            infoDiv.style.top = canvasPosition.y + 'px';
          });
          document.body.appendChild(infoDiv);
        }
        function tiaozheng1(){
          infoDiv.style.display = 'none'; // 隐藏infoDiv
          that.dialogTableVisible1 = true;
          that.tanName = '参数调整';
          that.parameterEffect = 'dark';
        }
      }
    },

    queren(){
      debugger
      ElNotification({
        title: '参数调整',
        message: '参数调整成功',
        type: 'success',
      })
      this.dialogTableVisible1 = false;
    },

    //获取到选项
    submit() {
      // 在提交时遍历工况数组，检查每个工况的选中状态
      this.conditions.forEach(condition => {
        if (condition.checked) {
          console.log(`${condition.name} 被选中`);
          // 执行选中工况的逻辑
        }else{
          ElMessage({
            message: 'Warning, this is a warning message.',
            type: 'warning',
          })
        }
      });
    },
}
};
</script>

<style scoped lang="scss">
.fangzhen{
  width: 100%;
  height: 100%;
  :deep(.el-form-item--default .el-form-item__label) {
    height: 32px;
    line-height: 32px;
    color: white;
  }
  .textC{
    text-align: center;
  }
  .el-row {
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
  }
  .padding5{
    padding: 1rem;
    text-align: center;
    cursor: pointer;
  }
  #cesiumContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

  .searchDiv{
    padding: 0 2rem;
    height: 2.85rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 13%;
    left: 25%;
    z-index: 335;
    align-items: center;
    color: white;
    background: linear-gradient( 90deg, #012D4F 0%, #035793 49%, #002C4F 100%);
    border-radius: 9px;
    ul{
      display: flex;
      justify-content: center;
      align-items: center;
      li{
        width: 4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
      }
    }

  }

  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 999;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: fixed;
      width: 50rem;
      height: 30rem;
      z-index: 9999;
      left: 50%;
      top: 40%;
      margin-left: -25rem;
      margin-top: -15rem;
      background-image: url("../../assets/images/special.png");
      background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      .xxDiv{
        width: 50rem;
        height: 40rem;
        position: relative;
        padding: 1.8rem;
        .titlegk{
          color: white;
          font-weight: bolder;
          font-size: 1rem;
          margin-left: 3.5rem;
          width: 100%;
          height: 2.5rem;
        }
        .gkuang{
          width: 95%;
          height: 21.5rem;
          color: white;
          margin: 0 auto;
          padding: 1rem;
          overflow-y: auto;
        }
        .caozuo{
          width: 95%;
          display:flex;
          justify-content: center;
        }
      }
      .xx{
        width:2rem;
        height:2rem;
        position: absolute;
        top: 0rem;
        right: 0rem;
        cursor: pointer;
        z-index: 999;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .aslider_s{
    position: absolute;
    z-index: 333;
    width: 20%;
    height: 98%;
    top: 7%;
    right: 0%;
    background-image: url("../../assets/images/rightBg.png");
    background-size: 100% 100%; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
    .asliderStyle{

      font-size: 1rem;
      height: 86%;
      display: flex;
      align-items: center;
      .cendiv{
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        .firstDiv{
          width: 100%;
          height: 5rem;
          display: flex;
          justify-content: flex-end;
          padding: 1rem;
          .borderDiv{
            padding: 0.5rem 1rem;
            img{
              width: 2rem;
              height: 2rem;
            }
            margin-left: 0.5rem;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            border:1px solid #035398;
            background-color: #035398;
          }
        }

      }
    }
  }

}


</style>

